<template>
	<!--代表每一项贴子-->
	<view class="item" @click="getDetail(p_item.id)">
		<view class="topUser">
			<view class="left">
				<image :src="p_item.u.header[0]" class="userPhoto" :lazy-load="true"></image>
			</view>
			<view class="right">{{p_item.u.name}}</view>
		</view>
		<view class="contentText">
			<text class="cate" v-if="p_item.cate.length>0">#{{p_item.cate}}#</text>{{p_item.text}}
		</view>
		<view class="centerMedia">
			<image :lazy-load="true" @tap.stop="viewImage(p_item.image.big[0])" style="max-height: 300px;" v-if="p_item.type=='image'" class="centerImage" mode="aspectFill" :src="p_item.image.big[0]"></image>
			<!-- src:代表播放的视频的地址，poster:设置视频封面地址	-->
			<!-- <video v-if="p_item.type=='video'" class="centerImage" :src="p_item.video.video[0]" :poster="p_item.video.thumbnail[0]"></video> -->
			<view class="videoView" @click.stop="isShowMask=true" v-if="p_item.type=='video'">
				<image :lazy-load="true"  :src="p_item.video.thumbnail[0]" mode="widthFix" class="centerImage"></image>
				<text class="iconfont icon-bofang"></text>
			</view>
			<!--gif动图 -->
			<image :lazy-load="true" @tap.stop="viewImage(p_item.gif.images[0])" style="max-height: 300px;" :src="p_item.gif.images[0]" v-if="p_item.type=='gif'" class="centerImage" mode="top left"></image>
		</view>
		<!-- 热门回复 -->
		<!--如果有热门回复 就添加热门回复 -->
		<view class="bottomHotComment" v-for="(t,t_index) in p_item.top_comments" :key="t_index">
			<view class="hotCommentUser">
				<view class="left">
					<image :lazy-load="true" :src="t.u.header[0]" class="commentUserPhoto"></image>
				</view>
				<view class="center">{{t.u.name}}</view>
				<view class="likeNum">
					<text class="iconfont icon-zan"></text>
					{{t.like_count}}
				</view>
			</view>
			<!--回复的内容 -->
			<view class="hotCommentText">
				{{t.content}}
			</view>
		</view>
		<!-- 赞 回复  转发-->
		<view class="bottomZanCai">
			<!--赞 -->
			<view class="zan">
				<text class="iconfont icon-zan"></text>
				{{p_item.up}}
			</view>
			<!-- 回复-->
			<view class="comment"> 
				<text class="iconfont icon-huifu"></text>
				 {{p_item.comment}}
			</view>
			<!-- 转发 -->
			<view class="forward" @tap.stop="sharePostItem">
				<text class="iconfont icon-forward"></text>
				{{p_item.forward}}
			</view>
		</view>
		<view class="videoPlayMask" v-if="isShowMask" @tap.stop="isShowMask=false">
			<video :src="p_item.video.video[0]" :poster="p_item.video.thumbnail[0]"></video>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isShowMask:false
			};
		},
		//这一个地方是从外边接收一个值 
		//相当于微信里面的properties这个值
		/*
			propertyis:{
				p_item:Object
			}
		*/
		props:["p_item"],
		methods:{
			//预览图片
			viewImage(imgUrl){
				uni.previewImage({
					urls:[imgUrl]
				});
			},
			//id指的是贴子的Id
			getDetail(id){
				//跳转之前，把当前项的数据旋转在缓存里面去
				uni.setStorageSync("p_item",this.p_item);
				uni.navigateTo({
					url:"/pages/postDetail/postDetail?id="+id
				});
			},
			//分享
			sharePostItem(){
				//#ifdef APP-PLUS
				uni.showActionSheet({
					itemList:["分享给QQ空间","分享到QQ好友"],
					success:res=>{
						if(res.tapIndex==0){
							uni.showToast({
								title:"暂未开通",
								icon:"none"
							});
						}
						else if(res.tapIndex==1){
							//获取分享的缩略图
							var imgUrl="";
							if(this.p_item.type=="video"){
								imgUrl=this.p_item.video.thumbnail_small[0];
							}
							else if(this.p_item.type=="image"){
								imgUrl=this.p_item.image.thumbnail_small[0];
							}
							else if(this.p_item.type=="gif"){
								imgUrl=this.p_item.gif.gif_thumbnail[0];
							}
							uni.share({
								provider:"qq",
								href:this.p_item.share_url,
								imageUrl:imgUrl,
								title:this.p_item.text.length>10?this.p_item.text.substr(0,10):this.p_item.text,
								success: (res) => {
									uni.showToast({
										title:"分享成功",
										icon:"none"
									});
								}
							});
						} 
					}
				})
				//#endif
				//#ifdef MP-WEIXIN
				wx.showShareMenu({
					withShareTicket:true
				});
				//#endif
			}
		}
	}
</script>

<style scoped>
/*
	如果加了scoped则代表当前的样式只作用在这个区域，其它区域不能使用
*/
/*每一项贴子是item*/
	.item{
		box-sizing: border-box;
		padding: 10upx 20upx;
		background-color: white;
		margin-top: 20upx;
	}
	.topUser{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.topUser .left{
		width: 60upx;
		height: 60upx;
		border-radius: 30upx;
	}
	.topUser .left .userPhoto{
		width: 100%;
		height: 100%;
		display: block;
		border-radius:30upx ;
	}
	.topUser .right{
		flex: 1;
		font-size: 28upx;
		box-sizing: border-box;
		padding-left: 20upx;
	}
	.contentText{
		font-size: 28upx;
		margin-top: 10upx;
		margin-bottom: 10upx;
		line-height: 1.7;
		font-weight: bold;
	}
	.centerImage{
		width: 100%;
	}
	
	/* 热门回复 */
	.bottomHotComment{
		background-color: #f2f2f2;
		box-sizing: border-box;
		padding: 10upx;
		margin-top: 2upx;
	}
	.hotCommentUser{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.hotCommentUser .left{
		width: 60upx;
		height: 60upx;
		border-radius: 30upx;
	}
	.commentUserPhoto{
		width: 60upx;
		height: 60upx;
		display: block;
		border-radius: 30upx;
	}
	.hotCommentUser .center{
		flex: 1;
		font-size: 28upx;
		box-sizing: border-box;
		padding-left: 20upx;
	}
	.likeNum{
		width: 120upx;
		font-size: 28upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.hotCommentText{
		font-size: 28upx;
		padding-top: 20upx;
		shape-padding: 20upx;
		box-sizing: border-box;
	}
	.bottomZanCai{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		font-size: 28upx;
		padding-top: 20upx;
		padding-bottom: 10upx;
	}
	.contentText>.cate{
		font-weight: bold;
		color: orange;
		margin-right: 10upx;
		
	}
	.videoView{
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.videoView .iconfont{
		position: absolute;
		z-index: 1;
		font-size: 80upx;
		color: rgba(255,255,255,0.8);
		
	}
	.videoPlayMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.9);
		z-index: 100;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.videoPlayMask>video{
		width: 100%;
	}
</style>
